<!-- 时间轴 -->
<template>
	<view class="cu-timeline">
		<view class="cu-item " v-for="(item,index) in lineList" :key="index">
			<view class="nl-shadow-box workDetails nl-margin-bottom-md">
				<view>
					<view>{{item.startDate}}</view>
					<view>{{item.startTime}}</view>
				</view>
				<view>
					{{item.context == ''?item.staffName + item.stateName:item.context}}
				</view>
				<!-- <view class="">
				<text>{{item.startTime}} </text> 到达 {{item.staffName}} 工位
			</view> -->
			</view>
			<!-- 	<view class="nl-shadow-box workDetails nl-margin-bottom-md" v-if="item.endTime != undefined">
				<view>
					<view>{{item.endDate}}</view>
					<view>{{item.endTime}}</view>
				</view>
				<view>
					{{item.context}}
				</view>
			</view> -->
		</view>
	</view>


</template>

<script>
	export default {
		name: "timeline",
		props: {
			lineList: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
			};
		},
		created() {

		},
		mounted() {
		},
		computed: {

		},

		methods: {
		}
	}
</script>

<style lang="scss">
	.cu-timeline {
		display: block;
		overflow: auto;
	}

	.cu-timeline .cu-time {
		width: 120upx;
		text-align: center;
		padding: 20upx 0;
		font-size: 26upx;
		color: #888;
		display: block;
	}

	.cu-timeline>.cu-item {
		padding: 31rpx 31rpx 31rpx 120rpx;
		position: relative;
		display: block;
		z-index: 0;
	}

	.cu-timeline>.cu-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1rpx;
		background-color: #afafaf;
		left: 60upx;
		height: 100%;
		top: 0;
		z-index: 8;
	}

	.cu-timeline>.cu-item::before {
		content: "";
		display: block;
		position: absolute;
		top: 65rpx;
		z-index: 9;
		border-radius: 50%;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(65, 134, 236, 0.3);
		border: 6rpx solid #1585FC;
		width: 20rpx;
		height: 20rpx;
		text-align: center;
		line-height: 20rpx;
		left: 45rpx;
	}

	.cu-timeline>.cu-item>.content {
		padding: 30upx;
		border-radius: 6upx;
		display: block;
		line-height: 1.6;
	}

	.cu-timeline>.cu-item>.content+.content {
		margin-top: 20upx;
	}

	.cu-timeline>.cu-item>.nl-shadow-box {
		border-radius: 10rpx;
	}

	.workDetails {
		display: flex;
		align-items: center;
		padding: 20rpx 26rpx;
	}

	.workDetails>view:nth-child(1) {
		margin-right: 24rpx;
		padding-right: 24rpx;
		border-right: 2rpx solid #F0F0F0;
	}

	.workDetails>view:nth-child(2) {
		font-size: 28rpx;
	}

	.workDetails>view>view:nth-child(1) {
		font-size: 16rpx;
		color: #AFAFAF;
	}

	.workDetails>view>view:nth-child(2) {
		font-size: 30rpx;
		height: 36rpx;
		line-height: 36rpx;
	}
</style>
